
<template>
    <div class="map-scene">
        <div class="scene-setting-content">
            <div class="layer-type-box box-item">
                <el-tree
                    style="max-width: 600px"
                    :props="props"
                    :load="layerLoadNode"
                    lazy
                    @node-click="handleLayer"
                    @check-change="changeLayer"
                    show-checkbox
                >
                    <template #default="{ node, data }">
                        <span class="custom-icon">
                            <el-icon :size="1" class="tree-icon-item" v-if="node.isLeaf"><PictureFilled /></el-icon>
                            {{ node.label }}
                        </span>
                    </template>
                </el-tree>
            </div>
            <div class="terrain-type-box box-item">
                <el-tree
                    style="max-width: 600px"
                    :props="props"
                    :load="terrainLoadNode"
                    lazy
                    show-checkbox
                >
                </el-tree>
            </div>
        </div>
    </div>
  </template>
  
  <script setup lang="ts">
import * as Cesium from 'cesium'
import { useCesiumGlobalStore } from "@/store/modules/cesiun-global"
import { onMounted, onUnmounted, ref } from "vue";
import type Node from 'element-plus/es/components/tree/src/model/node'
import geoJsonDataEffect from '@/utils/drawGeoJsonData';
import citys from './city'
  const cesiumGlobalStore = useCesiumGlobalStore()
  import areas from './areas.json'
interface Tree {
  name: string
  leaf?: boolean,
  icon?: string,
  id: string | number
}

const props = {
  label: 'name',
  children: 'zones',
  isLeaf: 'leaf',
}
const nationalData = {
  data: areas,
  name: 'nationalBorder_map'
}
const geoJsonData = new geoJsonDataEffect(cesiumGlobalStore.viewerInstance,nationalData)
onMounted(async () => {

})
const nationalBorder = ref(null)

const layerLoadNode = (node: Node, resolve: (data: Tree[]) => void) => {
  if (node.level === 0) {
    return resolve([{ name: '图层',id: '0-0' }])
  }
  if (node.level > 1) return resolve([])

//   setTimeout(() => {
    const data: Tree[] = [
      {
        name: '世界首都',
        leaf: true,
        id: '0-1'
      },
      {
        name: '中国省名',
        leaf: true,
        id: '0-2'
      },
      {
        name: '中国市名',
        leaf: true,
        id: '0-3'
      },
      {
        name: '中国国界',
        leaf: true,
        id: '0-4'
      },
    ]

    resolve(data)
//   }, 500)
}

const terrainLoadNode = (node: Node, resolve: (data: Tree[]) => void) => {
    if (node.level === 0) {
    return resolve([{ name: '地形',id: '1-0' }])
  }
  if (node.level > 1) return resolve([])

//   setTimeout(() => {
    const data: Tree[] = [
      {
        name: 'global',
        leaf: true,
        id: '1-1'
      },
      {
        name: '0_4_terrain',
        leaf: true,
        id: '1-2'
      },
      {
        name: 'BJ-30M',
        leaf: true,
        id: '1-3'
      },
      {
        name: 'TW-30M',
        leaf: true,
        id: '1-4'
      },
    ]

    resolve(data)
}

const handleLayer = (data:Tree) => {
    console.log(data)
}
const changeLayer = (data:Tree,checkd:boolean) => {
    console.log(data,checkd)
    if(data.id === '0-4'){
        if(checkd){
          geoJsonData.show(true)
        }else{
          geoJsonData.show(false)
        }
    }else if(data.id === '0-3'){
      // 新建 Cesium.LabelCollection 对象
        var labels = cesiumGlobalStore.viewerInstance.scene.primitives.add(new Cesium.LabelCollection());
        if(checkd) {
          // 添加 Label
          for (var i = 0, len = citys.length; i < len; i++) {
              var cityCfg = citys[i];
              // Cesium.Label
              var labelParam = {
                  text: cityCfg[0], // 城市名
                  position: new Cesium.Cartesian3.fromDegrees(cityCfg[1], cityCfg[2], 0), // 位置
                  font: "24px Helvetica", // 字体样式
                  fillColor: Cesium.Color.ORANGE, // 字体颜色
                  scaleByDistance: new Cesium.NearFarScalar(1.5e2, 2, 8.0e6, 0.1) // 重要：相机远近距离的
              };
              // 添加
              labels.add(labelParam);
          }
        }else {
          cesiumGlobalStore.viewerInstance.scene.primitives.remove(labels)
        }

    }
}

  </script>
  
  <style scoped lang="less">
.map-scene{
    .scene-setting-content{
        ul{
            padding: 0;
            margin: 0;
        }
        li{
            padding: 5px 0;
            border-bottom: 1px solid #eee;
            .environment-title{
                color: #999;
                font-size: 14px;
                line-height: 32px;
            }
            list-style:none;
            display: flex;
            justify-content: space-between;
        }
        .tree-icon-item{
            svg{
                width: 15px;
                height: 15px;
                vertical-align: middle;
            }
        }
        .box-item{
            padding-bottom: 25px;
            border-bottom: 1px solid #ddd
        }
        .terrain-type-box{
            margin-top: 10px;
        }
    }
}
  </style>
  